<template>
  <div>
    <div ref="chartColumn" style="width: 100%; height: 300px"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  props: {
    dataList: {
      type: Array,
      // default: [],
    },
  },
  name: "page",
  mounted() {
    // 在通过mounted调用即可
    this.echartsInit();
  },
  methods: {
    //初始化echarts
    echartsInit() {
      console.log(this.dataList,'接口的参数')
      let nameList=[]
      let valList=[]
      this.dataList.forEach(e => {
        nameList.push(e.attribute)
        valList.push(e.num)
      });
     
      
      let myChart = this.$echarts.init(this.$refs.chartColumn);
      const dataArr = [];
      let dataObj = {
        name: "征像银行使用率排名",
        type: "bar",
        year: nameList,
        val: [
          {
            name: "",
            value: valList,
          },
          // {
          //   name: "崩塌",
          //   value: ["0", "0", "20", "11", "18", "5", "18", "5"],
          // },
          // {
          //   name: "泥石流",
          //   value: ["4", "10", "2", "22", "12", "3", "12", "3"],
          // },
        ],
      };
      dataObj.val.map((item) => {
        const newArr = {
          name: item.name,
          type: "bar",
          smooth: true,
          symbolSize: 8,
          data: item.value,
          barWidth: "12%",
          itemStyle: {
            normal: {
              color:
                item.name === "滑坡"
                  ? "#FB9F2F"
                  : item.name === "崩塌"
                  ? "#1B6BEB"
                  : "#C31BEB",
            },
          },
        };

        dataArr.push(newArr);
      });
      // 指定图表的配置项和数据
      let option = {
       
        backgroundColor: "",
        color: ["#f0c725", "#16f892"],
        title: {
          left: "30",
          top:'10',
          text: dataObj.name,
          textStyle: {
            color: "#8990A2",
            fontSize: "14",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
       
          right:30,
          top: "25",
          textStyle: {
            color: "#8990A2",
            fontSize: 14,
          },
        },
        grid: {
          left: "11%",
          right: "6%",
          top: "25%",
          bottom: "10%",
          containLabel: false,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: true,
            data: dataObj.year,
            axisLine: {
              lineStyle: {
                color: "#8990A2",
              },
            },
            axisLabel: {
              interval: 0,
              color: "#8990A2",
              fontSize: "15",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "(处)",
            nameTextStyle: {
              color: "#8990A2",
              align: "right",
              lineHeight: 10,
            },
            axisLine: {
              lineStyle: {
                color: "#8990A2",
              },
            },
            axisLabel: {
              interval: 0,
              color: "#8990A2",
              fontSize: "15",
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: dataArr,
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>
<style scoped lang="scss"></style>
